<template>
  <div>
    <!-- 首页-文章列表组件  只负责循环展示组件数据 -->
    <ArticleItem
    v-for="(item,index) in arr"
    :key="index"
    :item="item"
    @close="btn"
    @click.native="detailFn(item)"
    ></ArticleItem>

    <!-- 反馈面板 -->
    <div>
      <van-action-sheet
        v-model="show"
        :actions="actions"
        @select="onSelect"
        get-container="body"
        cancel-text="取消"
      />
    </div>
  </div>
</template>

<script>
import ArticleItem from '@/components/ArticleItem'
export default {
  props: {
    arr: Array // 所有文章列表数据
  },
  data () {
    return {
      artId: null, // 点击的文章ID
      show: false, // 是否展示面板
      actions: [
        // 当前页面反馈面板选项
        { name: '不感兴趣' },
        { name: '反馈垃圾内容' },
        { name: '拉黑作者' }
      ],
      firstActions: [
        // 一级反馈面板数据
        { name: '不感兴趣' },
        { name: '反馈垃圾内容' },
        { name: '拉黑作者' }
      ],
      secondActions: [
        // 二级反馈面板数据
        {
          value: -1,
          name: '返回'
        },
        {
          value: 0,
          name: '其它问题'
        },
        {
          value: 1,
          name: '标题夸张'
        },
        {
          value: 2,
          name: '低俗色情'
        },
        {
          value: 3,
          name: '错别字多'
        },
        {
          value: 4,
          name: '旧闻重复'
        },
        {
          value: 6,
          name: '内容不实'
        },
        {
          value: 8,
          name: '侵权'
        },
        {
          value: 5,
          name: '广告软文'
        },
        {
          value: 7,
          name: '涉嫌违法犯罪'
        }
      ]
    }
  },
  methods: {
    btn (artId) {
      this.show = true // 底部反馈面板出现
      this.artId = artId // 把点击 x 时传下来的item文章对象里额的文章id存到data变量上
    },
    onSelect (action) {
      // 面板选择的事件
      // action绑定的是数据对象, index绑定的是索引
      if (action.name === '反馈垃圾内容') {
        // 证明点击的是反馈垃圾内容
        this.actions = this.secondActions
      } else if (action.name === '返回') {
        this.actions = this.firstActions
      } else {
        this.$emit('action', action, this.artId)
        // 面板选择的事情
        this.show = false // 点击收起
      }
    },
    detailFn (item) {
      // console.log(item)
      this.$emit('detail', item)
    }
  },
  components: {
    ArticleItem
  }
}
</script>

<style>

</style>
